<template>
  <div ref="echarts" :style="{ width: width,height: height }"></div>
</template>

<script>
import { myMixin } from '../../mixin/mixin';
export default {
  mixins: [ myMixin ],
  props: {
    width: {
      typeof: String,
    },
    height: {
      typeof: String,
    },
    cross: {
      type: Array,
      default() {
        return []
      }
    },
    opinionData: {   // 区域数据 - 1
      type: Array,
      default() {
        return []
      }
    },
  },
  watch: {
    opinionData: {
      handler(newval, oldval) {
        if(newval) {
          this.initChart()
        }
        return newval
      },
      deep: true
    },
    cross: {
      handler(newval, oldval) {
        if(newval) {
          this.initChart()
        }
        return newval
      },
      deep: true
    },
  },
  mounted() {
    var _this = this;
    _this.$nextTick( () => {
      _this.initChart()
    })
    // window.onresize = function () {
    //   console.log(666)
    //   _this.charts.resize();
    // };
    window.addEventListener( 'resize' , function () {
      _this.charts.resize();
    })
  },
  methods: {
    initChart(){
      if(this.charts != null && this.charts != '' && this.charts != undefined) {
        this.charts.dispose();
      }
      this.charts = this.echarts.init(this.$refs.echarts);
      // this.charts.on("click", this.eConsole);
      // if(this.cross.length == 0) {
      //   this.charts.setOption({
      //     title: {
      //       text: '暂无数据',
      //       x: 'center',
      //       y: 'center',
      //       textStyle: {
      //         color: '#65ABE7',
      //         fontWeight: 'normal',
      //         fontSize: 16
      //       }
      //     }
      //   })
      // } else {
        this.charts.setOption({
          title: {
            text: '单位(分)',
            top: 0,
            left: 7,
            color: '#ccc',
            textStyle: {
              fontSize: '12'
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          // 网格
          grid: {
            x: 40,
            y: 30,
            x2: 80,
            y2: 60,
            top: '10%',
            left: '1%', // 调整y轴字体显示不完整，原来值是3%
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          xAxis: {   // x 轴
            type: 'category',
            scale:true, // y轴自适应
            axisTick: {
              alignWithLabel: true
            },
            data: this.cross
          },
          yAxis: {   // y 轴
            type: 'value',
            data: [0,2,4,6,8,10],
            axisLabel: { // y轴设置为%
              show: true,
              interval: 'auto',
              // formatter: '{value}分',
            },
          },
          series: this.opinionData // 区域数据
        }) 
      // }
      window.onresize = this.charts.resize;
    }
  }
}
</script>


<style scoped>

</style>
